/*
 * @Author: funlee 
 * @Email: i@funlee.cn 
 * @Date: 2017-12-12 11:19:13 
 * @Last Modified time:   2017-12-12 11:19:13 
 * @Description: 加载高德地图
 *               tileSize为256，这也是现在绝大多数瓦片采用的大小
 *               但Yahoo地图使用的是512，所以我们需要显示指定
 * 
 *                
 */
import ol from 'openlayers'
import 'openlayers/dist/ol.css'

 export default () => {
  // Open Street Map 地图层
  var openStreetMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    })
  });

  // 高德地图层
  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    })
  });

  // yahoo地图层
  var yahooMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      tileSize: 512,
      url: 'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B'
    })
  });

  // 创建地图
  var map = new ol.Map({
    layers: [
      yahooMapLayer
    ],
    view: new ol.View({
      // 设置成都为地图中心
      center: [104.06, 30.67],
      projection: 'EPSG:4326',
      zoom: 10
    }),
    target: 'map'
  });
 }
